<template>
  <div class="main">
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="实名信息" size="50%" :withHeader="false"
      :visible.sync="dialogVisible" @close="handleClose" :show-close="true">
      <div style="position: relative;margin-bottom: 10px;">
        <div class="drawerTitle">
          <span>实名信息</span>
          <div class="close" @click="handleClose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <el-row>
        <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder" />
              <div class="text">实名信息</div>
            </div>
            <div class="right" />
          </div>
          <el-col :span="11">
            <el-form-item label="真实姓名:" prop="">
              {{realname_details.name}}
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="身份证号:" prop="">
              {{realname_details.id_card_no}}

            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="联系地址:" prop="">
              {{realname_details.residence_address}}
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="审核时间:" prop="">
              {{realname_details.audit_time}}
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="审核状态:" prop="">
              <span style="color: #0076f6;" v-if="realname_details.status == 0">待审核</span>
              <span style="color: #13ce66;" v-if="realname_details.status == 1">审核通过</span>
              <span style="color: #f86d60;" v-if="realname_details.status == 2">审核驳回</span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="身份证正:" prop="">
              <div
                style="width: 100px; height: 40px;">
                <el-image :src="realname_details.id_card_front_photo" style="width: 100px;height: 40px;"/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="身份证反:" prop="">
              <div
                style="width: 100px; height: 40px;">
                <el-image :src="realname_details.id_card_back_photo" style="width: 100px;height: 40px;"/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="informationTitleView" style="margin-top: 50px;">
              <div class="leftBox">
                <div class="leftborder" />
                <div class="text">账号信息</div>
              </div>
              <div class="right" />
            </div>
          </el-col>
          <el-col :span="11">

            <el-form-item label="用户昵称:" prop="">
              {{realname_details.user ? realname_details.user.nickname :'-'}}
            </el-form-item>
            </el-col>
             <el-col :span="11">
            <el-form-item label="用户ID:" prop="">
              {{realname_details.user ? realname_details.user.id : '-'}}
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户账号:" prop="">
              {{realname_details.user ? realname_details.user.mobile :'-'}}
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户头像:" prop="">
              <div v-if="realname_details.user && realname_details.user.avatar != ''"
                style="width: 40px; height: 40px;">
                <el-image :src="realname_details.user.avatar" style="width: 40px;height: 40px;" />
              </div>
              <div v-else>
                -
              </div>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-drawer>
  </div>
</template>
<script>
  export default {
    props: ["realname_details"],
    data() {
      return {
        dialogVisible: false,
        ruleForm: {
          status: '',
          remarks: '',
          id: ''
        },
      }
    },
    created() {},
    methods: {

      open() {
        this.dialogVisible = true
      },
      handleClose() {
        this.dialogVisible = false
      },
    }
  }
</script>

<style scoped lang="scss">

</style>
